<template>
    <div class="container yuan-container">
        <div class="filter-panel">
            <div class="filter-list">
                <span>优惠券名称：</span>
                <a-input-search allowClear v-model="pageParams.name" placeholder="优惠券名称" @search="resetList" />
            </div>
            <div class="filter-list">
                <span>创建时间：</span>
                <a-range-picker @change="dateChange" :placeholder="['开始日期','结束日期']" :format="['YYYY-MM-DD','YYYY-MM-DD']" />
            </div>
            <!-- <div class="filter-list">
                <span>活动状态：</span>
                <a-select v-model="pageParams.issueType" @change="resetList" allowClear placeholder="活动状态">
                    <a-select-option value="1">用户主动领取</a-select-option>
                    <a-select-option value="2">系统自动发放</a-select-option>
                </a-select>
            </div> -->
        </div>
        <div class="table">
            <a-table bordered :loading="loading" :rowKey="(item,i)=>item.id" :columns="columns" :data-source="pageList"
                :pagination="pagination">
                <template slot='action' slot-scope="text, record, index">
                    <span class="tab-act c-primary" @click="clickDetail(record)"  v-if="$checkPer(['dataBackupDetail'])">详情</span>
                </template>
            </a-table>
        </div>
        <DetailVue :visible="detailVisible" @closeModal="() => detailVisible = false" :editInfo="editInfo" @resetList="resetList" :couponType="'专属券'" />
    </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import marketApi from "@/api/marketApi";
import { format, toYuan } from "@/utils";
import { h } from "vue";
import DetailVue from "./detail.vue";
@Component({
    name: "tpl",
    components: {DetailVue},
})
export default class extends Vue {
    loading = false;
    pageList = [];
    pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.pageChange,
    };
    pageParams: any = {
        keyword: "",
    };
    statusList = [
        { id: 0, name: "待提交", class: "" },
        { id: 1, name: "待确认", class: "c-primary" },
        { id: 2, name: "待审核", class: "c-warning" },
        { id: 3, name: "待发布", class: "c-primary" },
        { id: 4, name: "已发布", class: "c-success" },
        { id: 5, name: "已下架", class: "c-danger" },
        { id: 6, name: "已中止", class: "c-danger" },
        { id: 7, name: "已驳回", class: "c-danger" },
    ];
    columns = [
        {
            align: "center",
            dataIndex: "id",
            key: "id",
            title: "优惠券编码",
        },
        {
            align: "center",
            dataIndex: "name",
            key: "name",
            title: "优惠券名称",
        },
        {
            align: "center",
            dataIndex: "issueType",
            key: "issueType",
            title: "发放方式",
            customRender: (text: string, record: any, index: number) => {
                return record.issueType === 1 ? "用户主动领取" : "系统自动发放";
            },
        },
        {
            align: "center",
            dataIndex: "issueQuantity",
            key: "issueQuantity",
            title: "限制发放数量",
            customRender: (text: string, record: any, index: number) => {
                return record.issueType === 1 ? record.issueQuantity : "--";
            },
        },
        {
            align: "center",
            dataIndex: "receivedQuantity",
            key: "receivedQuantity",
            title: "领取数量",
            customRender: (text: string, record: any, index: number) => {
                return record.issueType === 1 ? record.receivedQuantity : "--";
            },
        },
        {
            align: "center",
            dataIndex: "usedQuantity",
            key: "usedQuantity",
            title: "已核销数量",
            customRender: (text: string, record: any, index: number) => {
                return record.usedQuantity;
            },
        },
        {
            align: "center",
            dataIndex: "discountAmount",
            key: "discountAmount",
            title: "优惠金额",
            customRender: (text: string, record: any, index: number) => {
                return toYuan(record.discountAmount);
            },
        },
        {
            align: "center",
            dataIndex: "totalDiscountAmount",
            key: "totalDiscountAmount",
            title: "满减累计金额",
            customRender: (text: string, record: any, index: number) => {
                return toYuan(record.totalDiscountAmount);
            },
        },
        {
            align: "center",
            dataIndex: "createTime",
            key: "createTime",
            title: "创建时间",
            customRender: (text: string, record: any, index: number) => {
                return format(record.createTime);
            },
        },
        {
            align: "center",
            dataIndex: "creatorName",
            key: "creatorName",
            title: "创建人",
        },
        {
            align: "center",
            dataIndex: "status",
            key: "status",
            title: "活动状态",
            customRender: (text: string, record: any, index: number) => {
                if (record.status === 2 && record.auditStatus === 2) {
                    //如果是待审核且被拒绝
                    return h("span", { class: "c-danger" }, "审核拒绝");
                }
                const findData = this.statusList.find((item) => {
                    return item.id === record.status;
                });
                if (findData) {
                    return h("span", { class: findData.class }, findData.name);
                }
                return "";
            },
        },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 230,
            scopedSlots: { customRender: "action" },
        },
    ];
    async getList() {
        this.pageList = [];
        this.loading = true;
        try {
            const res = await marketApi.findCouponUsageRecordList({
                ...this.pageParams,
                pageSize: this.pagination.pageSize,
                pageNum: this.pagination.current,

                type: "专属券",
            });
            this.pageList = res.data?.rows || [];
            this.pagination.total = res.data?.total || 0;
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }

    mounted() {
        this.getList();
    }

    detailVisible = false;
    editInfo = {};
    async clickDetail(item) {
        this.loading = true;
        try {
            const res = await marketApi.findCouponDetailWithUsage({ couponId: item.id });
            this.editInfo = res.data;
            this.detailVisible = true;
        } finally {
            this.loading = false;
        }
    }

    dateChange(e: any[]) {
        const arr = e.map((item) => item.format("YYYY-MM-DD"));
        this.pageParams.createStartTime = arr[0] + " 00:00:01";
        this.pageParams.createEndTime = arr[1] + " 23:59:59";
        this.resetList();
    }
}
</script>
<style scoped lang="scss">
</style>
